<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile功能测试</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .result { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 3px; }
        .error { background: #ffebee; color: #c62828; }
        .success { background: #e8f5e8; color: #2e7d32; }
        button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #0056b3; }
        input { padding: 8px; margin: 5px; border: 1px solid #ddd; border-radius: 3px; }
    </style>
</head>
<body>
    <h1>Profile功能测试页面</h1>
    
    <div class="test-section">
        <h3>1. 测试获取用户信息</h3>
        <button onclick="testGetProfile()">测试获取用户信息</button>
        <div id="profileResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 测试更新昵称</h3>
        <input type="text" id="nicknameInput" placeholder="输入新昵称" value="测试昵称">
        <button onclick="testUpdateProfile()">测试更新昵称</button>
        <div id="updateResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. 测试头像上传</h3>
        <input type="file" id="avatarInput" accept="image/*">
        <button onclick="testUploadAvatar()">测试上传头像</button>
        <div id="avatarResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>4. 访问Profile页面</h3>
        <button onclick="goToProfile()">打开Profile页面</button>
    </div>

    <script>
        function testGetProfile() {
            $('#profileResult').html('正在获取用户信息...');
            $.ajax({
                type: 'GET',
                url: '/user/getProfile',
                success: function(data) {
                    let html = '<h4>用户信息响应</h4>';
                    html += '<p>状态: ' + data.status + '</p>';
                    html += '<p>消息: ' + data.message + '</p>';
                    if (data.data) {
                        html += '<p>用户ID: ' + data.data.id + '</p>';
                        html += '<p>用户名: ' + data.data.username + '</p>';
                        html += '<p>角色: ' + data.data.role + '</p>';
                        html += '<p>昵称: ' + (data.data.nickname || '未设置') + '</p>';
                        html += '<p>头像: ' + (data.data.avatar || '未设置') + '</p>';
                        html += '<p>创建时间: ' + (data.data.createTime || '未设置') + '</p>';
                    }
                    $('#profileResult').html(html).removeClass('error').addClass('success');
                },
                error: function(xhr, status, error) {
                    $('#profileResult').html('获取用户信息失败: ' + error + '<br>状态码: ' + xhr.status).removeClass('success').addClass('error');
                }
            });
        }
        
        function testUpdateProfile() {
            const nickname = $('#nicknameInput').val();
            $('#updateResult').html('正在更新昵称...');
            
            $.ajax({
                type: 'POST',
                url: '/user/updateProfile',
                data: { nickname: nickname },
                success: function(data) {
                    let html = '<h4>更新昵称响应</h4>';
                    html += '<p>状态: ' + data.status + '</p>';
                    html += '<p>消息: ' + data.message + '</p>';
                    if (data.data) {
                        html += '<p>更新后的昵称: ' + data.data.nickname + '</p>';
                    }
                    $('#updateResult').html(html).removeClass('error').addClass('success');
                },
                error: function(xhr, status, error) {
                    $('#updateResult').html('更新昵称失败: ' + error + '<br>状态码: ' + xhr.status).removeClass('success').addClass('error');
                }
            });
        }
        
        function testUploadAvatar() {
            const fileInput = document.getElementById('avatarInput');
            const file = fileInput.files[0];
            
            if (!file) {
                $('#avatarResult').html('请选择要上传的图片文件').removeClass('success').addClass('error');
                return;
            }
            
            const formData = new FormData();
            formData.append('avatar', file);
            
            $('#avatarResult').html('正在上传头像...');
            
            $.ajax({
                type: 'POST',
                url: '/user/uploadAvatar',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    let html = '<h4>头像上传响应</h4>';
                    html += '<p>状态: ' + data.status + '</p>';
                    html += '<p>消息: ' + data.message + '</p>';
                    if (data.data) {
                        html += '<p>头像路径: ' + data.data + '</p>';
                        html += '<img src="' + data.data + '" style="max-width: 100px; max-height: 100px; border: 1px solid #ddd;">';
                    }
                    $('#avatarResult').html(html).removeClass('error').addClass('success');
                },
                error: function(xhr, status, error) {
                    $('#avatarResult').html('头像上传失败: ' + error + '<br>状态码: ' + xhr.status).removeClass('success').addClass('error');
                }
            });
        }
        
        function goToProfile() {
            window.open('/profile.html', '_blank');
        }
    </script>
</body>
</html>
